<template>
	<view>
		<view class="app-header">
			<div class="background-gradient"></div>
			<view class="balance padding">
				<view class="content padding radius-xl bg-white padding-left-xl">
					<view class="text-black text-bold">总金额</view>
					<view class="number padding-top-sm text-bold text-black">
						<view class="money">
							<text class="text-red">{{ userInfo.balance || '0.00'}}</text>
						</view>
						<view class="right" @click="toUrl('/pages/user/wallet/walletLog',true)">
							<text class="text-gray">账单</text>
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="inc text-sm margin-top-sm">
						累计提现：<text class="text-red">0.00</text>
					</view>
				</view>
			</view>
		</view>
<!--		<view class="meal padding padding-top-0">-->
<!--			<view class="list grid col-2">-->
<!--				<view class="item padding-xs text-center" v-for="(item,index) in mealList" :key="index">-->
<!--					<view class="light radius-xl padding-tb" :class="form.selectedId == item.id?'themeColor':'bg-white'" @click="toSetMoney(item.id)">-->
<!--						<view class="number text-xl text-bold">{{item.money}}</view>-->
<!--						<view class="griv">{{item.name}}</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->

		<view class="custom padding padding-top-0">
			<view class="bg-white padding-sm radius-xl">
				<view class="margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>
					<text class="text-black">提现金额</text>
				</view>
				<view class="crow bg-gray radius-lg">
					<input style="width: 100%" type="number" placeholder="请输入金额" v-model="form.money" @blur="customMoney">
					<text>元</text>
				</view>
			</view>
		</view>
		<view class="submit padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg round shadow china-btn-bg" @click="submit()">确认提现</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					selectedId:0,
					money:''
				},
				wallet:[],
				mealList:[
					{id:1,money:'100',name:'充100送10'},
					{id:2,money:'200',name:'充200送20'},
					{id:3,money:'300',name:'充300送30'},
					{id:4,money:'1000',name:'充1000送100'},
				],
				setting:[],
        userInfo: {}
			};
		},
		onLoad() {
			this.getMyInfo();
		},
		methods:{
      getMyInfo(){
        if (uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').id) {
          this.$http.getTechnicianDetail({
            id: uni.getStorageSync('userInfo').id
          }).then(res=>{
            uni.setStorageSync('userInfo',res);
            this.$http.getStaffBalanceList({
              staff_id: res.id,
              type: 2
            }).then(res2=>{
              let values = res2.filter(item => item.status === 0).map(item=>parseFloat(item.amount));
              this.userInfo = {
                ...res,
                balance: parseFloat(res.balance) - values.reduce((a,b)=>a+b,0)
              };
            })
          })
        }
      },
			submit(){
				if(!this.form.money){
          uni.showToast({
            title: '请输入提现金额',
            icon: 'none'
          });
          return;
        }
        if(parseFloat(this.form.money) < 1){
          uni.showToast({
            title: '提现金额不能小于1元',
            icon: 'none'
          });
          return;
        }
        if(parseFloat(this.form.money) > parseFloat(this.userInfo.balance)){
          uni.showToast({
            title: '提现金额不能大于余额',
            icon: 'none'
          });
          return;
        }
        this.$http.createWithdraw({
          staff_id: this.userInfo.id,
          type: 2,
          desc: '提现',
          order_id: 0,
          status: 0,
          amount: this.form.money,
        }).then(res=>{
          this.getMyInfo();
          this.resetForm();
        })
			},
			toSetMoney(id){
				this.form.selectedId = id;
				this.form.money = '';
			},
			resetForm(){
				this.form = {
					money:'',
					selectedId:0,
				}
			},
			customMoney(){
				this.form.selectedId = 0;
			}
		}
	}
</script>

<style lang="less" scoped>
.app-header {
	position: relative;
	overflow: hidden;
	.background-gradient {
    background: linear-gradient(90deg, #ff6600 60%, #ff9900 100%) !important;
		width: 100%;
		height: 230upx; /* 背景高度可根据需要进行调整 */
		border-bottom-left-radius: 50% 50upx; /* 底部圆弧效果，可根据需求进行调整 */
		border-bottom-right-radius: 50% 50upx; /* 底部圆弧效果，可根据需求进行调整 */
	}
	.balance{
		margin-top: -170upx;
		.number{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.money{
				font-size: 50upx;
			}

		}
	}
}

.meal{
	.list{
		.item{
			.griv{
				font-size: 26upx;
			}
		}
	}
}
.custom{
	.crow{
		justify-content: space-between;
		padding: 15upx;
		input{
			font-size: 26upx;
		}
	}
}
.themeColor.light{
	// border: 1upx solid #ab3131;
}
</style>
